<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复利计算器</title>
    <style>
        form div {
            margin: 10px;
        }

        #left-pillar {
            height: 100px;
            width: 50px;
            background-color: red;
        }

        #right-pillar {
            height: 100px;
            width: 50px;
            background-color: green;
        }

        table td {
            padding: 8px;
            text-align: center;
            vertical-align: bottom;     /*让两个柱形图同底*/
        }
    </style>
</head>

<body>
    <h2>复利计算器</h2>
    <form name=calculator>
        <div>本金：<input type="text" name="money" id="money"></div>
        <div>年利率：<input type="number" name="interest" id="">%</div>
        <div>年期：
            <select name="year">
                <option value="0.25">3个月(0.25年)</option>
                <option value="0.5">6个月(0.5年)</option>
                <option value="1.0">12个月(1年)</option>
                <option value="1.5">18个月(1.5年)</option>
                <option value="2.0">24个月(2年)</option>
                <option value="2.5">30个月(2.5年)</option>
                <option value="3.0">36个月(3年)</option>
            </select>
        </div>
    </form>

    <table>
        <tr>
            <th><b>本金</b></th>
            <th><b>复利终值</b></th>
        </tr>
        <tr>
            <td id="before"></td>
            <td id="after"></td>
        </tr>
        <tr>
            <td>
                <div id="left-pillar"></div>
            </td>
            <td>
                <div id="right-pillar"></div>
            </td>
        </tr>
    </table>
    <script>
        let form = document.forms.calculator;       //表示获取当前页面的所有表单    calculator：表单id
        form.money.onblur = show;
        form.interest.oninput = show;
        form.year.onchange = show;
        function show() {
            let money = form.money.value;
            let show = document.getElementById('before');
            show.innerHTML = form.money.value;
            // let show = document.getElementById('after'); 
            let interest = form.interest.value * 0.01;
            let year = form.year.value;

            let result = Math.round(money * (1 + interest * year));
            document.getElementById('after').innerHTML = result;

            let height = result / money * 100 + 'px';
            document.getElementById('right-pillar').style.height = height;
        };
        show();
    </script>
</body>

</html>